<template>
  <view class="goodsItem">
    <view class="goods_img" @tap="goDetails">
      <image :src="itemData.images[0]" mode="aspectFill"></image>
      <view class="no_num" v-if="itemData.stock==0">
        <view class="no_num_text">
          已售完
        </view>
      </view>
    </view>
    <view class="goods_bottom_info_box">
      <view class="goods_name">{{ itemData.name }}</view>
      <view class="goods_inner_bottom_box">
        <view class="goods_left_info">
          <view class="goods_price">
            <span class="fn-sz-22 fn-cl-F34035">￥</span>
            <span class="fn-sz-30 fn-cl-F34035">{{ itemData.price }}</span>
          </view>
          <view class="goods_sale_num fn-cl-999999 fn-sz-22">
            <span class="mar-right-4">已售</span>
            <span>{{ itemData.sale_num }}</span>
          </view>
        </view>
        <view class="goods_shoping_car_btn" @tap="addCarFunc">
          <image class="icon-46" src="../../static/images/icon/icon_shoping_car_big.png" mode=""></image>
        </view>
      </view>
    </view>
    <u-popup :show="buyGoodsShow" mode="bottom" @close="buyGoodsClose">
      <view class="model_box">
        <view class="goods_info_box_popup">
          <view class="goods_img">
            <image :src="itemData.images[0]" mode=""></image>
          </view>
          <view class="goods_details_info">
            <view class="fn-sz-28">{{ itemData.name }}</view>
            <view class="flex-align-center">
              <view class="now_pirce">
                <span class="fn-sz-22 fn-cl-F34035">￥</span>
                <span class="fn-sz-30 fn-cl-F34035">{{ itemData.price }}</span>
              </view>
              <view class="old_price">
                <span class="fn-sz-22 fn-cl-666666">￥{{ itemData.old_price }}</span>
              </view>
            </view>
            <view class="">
              <span class="fn-sz-22 fn-cl-666666 mar-right-10">库存:</span>
              <span class="fn-sz-22 fn-cl-333333">{{ itemData.stock }}</span>
            </view>
          </view>
        </view>
        <view class="flex-align-center flex-between">
          <view class="fn-sz-28 fn-cl-333333">购买数量</view>
          <view class="btn_box">
            <image class="icon-44" src="../../static/images/icon/icon_del_btn.png" mode="" @tap="countFunc(false)"></image>
            <view class="num_box">{{ buyNum }}</view>
            <image class="icon-44" src="../../static/images/icon/icon_add_btn.png" mode="" @tap="countFunc(true)"></image>
          </view>
        </view>
        <view class="buy_btn_box">
          <button class="white_btn" @tap="addCarFunc">加入购物车</button>
          <button class="yellow_btn" @tap="buyNowFunc">立即购买</button>
        </view>
      </view>
    </u-popup>
    <u-popup :show="limitShow" mode="center" @close="limitClose" :round="10">
      <view class="limitModel">
        <view class="limit_tags">
          每人限购一份特价商品，确认替换原有商品吗？
        </view>
        <view class="change_goods_box_list">
          <view class="change_goods_box">
            <view class="change_goods_img">
              <image :src="curGoodsBox.newGoods.img" />
            </view>
            <view class="change_goods_name">
              {{ curGoodsBox.newGoods.name }}
            </view>
            <view class="now_pirce">
              <span class="fn-sz-22 fn-cl-F34035">￥</span>
              <span class="fn-sz-30 fn-cl-F34035">{{ curGoodsBox.newGoods.price }}</span>
            </view>
          </view>
          <view class="right_arr">
            <image class="icon-40" src="../../static/images/icon/icon_right_longarr.png" />
          </view>
          <view class="change_goods_box">
            <view class="change_goods_img">
              <image :src="curGoodsBox.orgGoods.img" />
            </view>
            <view class="change_goods_name">
              {{ curGoodsBox.orgGoods.name }}
            </view>
            <view class="now_pirce">
              <span class="fn-sz-22 fn-cl-F34035">￥</span>
              <span class="fn-sz-30 fn-cl-F34035">{{ curGoodsBox.orgGoods.price }}</span>
            </view>
          </view>
        </view>
        <div class="limit_btn_box">
          <button class="white_btn" @tap="limitClose">再想想</button>
          <button class="yellow_btn" @tap="changeNow">确认替换</button>
        </div>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  mapGetters,
  mapMutations
} from 'vuex';
export default {
  name: 'goodsItem',
  props: {
    itemData: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      buyGoodsShow: false,
      limitShow: false,
      buyNum: 1,
      limit: '',
      curGoodsBox: {
        orgGoods: {
          id: '',
          img: '',
          name: '',
          price: ''
        },
        newGoods: {
          id: '',
          img: '',
          name: '',
          price: ''
        }
      }
    };
  },
  methods: {
    ...mapMutations(['SET_SHOPING_CAR_LIST']),
    goDetails () {
      uni.navigateTo({
        url: `/pages/shop/shopDetails?product_id=${this.itemData.id}`
      });
    },
    openCar () {
      this.buyGoodsShow = true;
    },
    async addCarFunc () {
      const {
        name,
        new_price,
        price,
        id,
        images,
        stock,
      } = this.itemData;
      if (stock == 0) {
        this.$helper.toast('商品已售完');
        return;
      }
      let params = {
        name,
        new_price,
        price,
        id,
        images,
        num: this.buyNum
      };
      var isNewGoods = false;
      if (Number(new_price)) {
        isNewGoods = true;
        params.price = new_price;
      }
      let isHave = false;
      let shopingCarList = this.$store.state.shopingCarList.map(elem => elem);
      let goods_ids = `${params.id}-${params.num}`;
      let arr = [goods_ids];
      shopingCarList.forEach((item, index) => {
        if (item.id != params.id) {
          arr.push(`${item.id}-${item.num}`)
        }
      });

      this.$api.checkBuyLimit({
        goods: arr + ''
      }).then(async res => {
        let {
          data
        } = await this.$api.checkBuyNumLimit({
          goods: arr + ''
        });
        //没有限购的特价商品
        let curGoodsLimitObj = {};
        let curPidIdx = res.data.on_sale_product_arr.indexOf(params.id);
        if (curPidIdx != -1) {
          //当前被限制的商品的限制数量
          curGoodsLimitObj = data[curPidIdx];
          params.limit = curGoodsLimitObj.day_limit_buy - curGoodsLimitObj.buyed_num;
          params.day_limit_buy = curGoodsLimitObj.day_limit_buy;
          this.limit = params.limit;
          console.log(curGoodsLimitObj);
        } else {
          curGoodsLimitObj = data[0]
          params.limit = curGoodsLimitObj.day_limit_buy - curGoodsLimitObj.buyed_num;
          params.day_limit_buy = curGoodsLimitObj.day_limit_buy;
          this.limit = params.limit;
        }
        if (curGoodsLimitObj.buyed_num != 0 && curPidIdx != -1) {
          this.$helper.toast('特价商品每天只能购买一次');
          return;
        }
        if (res.data.check_status) {
          shopingCarList.forEach(elem => {
            if (elem.id == params.id) {
              isHave = true;
              if (isNewGoods) {
                this.$helper.toast('新人商品只能添加一个!');
              } else {
                console.log(elem.num, params.limit, 999999999)
                if (elem.num < params.limit) {
                  elem.num += params.num;
                  this.$helper.toast('已添加进购物车');
                  elem.limit = params.limit;
                  elem.day_limit_buy = params.day_limit_buy;
                } else {
                  this.$helper.toast(
                    `今日商品限购${curGoodsLimitObj.day_limit_buy}件,超过购买数量`);
                }
              }
            }
          })
          if (!isHave) {
            if (params.limit > 0) {
              shopingCarList.push(params);
              this.$emit('submitGetGoods', params);
              this.$helper.toast('已添加进购物车');
            } else {
              this.$helper.toast(
                `今日商品限购${params.day_limit_buy}件,超过购买数量`);
            }

          }
          this.SET_SHOPING_CAR_LIST(shopingCarList);
          this.buyNum = 1;
          this.buyGoodsShow = false;
        }
        //限购的特价商品
        else {
          let orgGoods = {
            id: '',
            img: '',
            name: '',
            price: ''
          }

          //循环证明购物车里已经有了特价商品种类
          shopingCarList.forEach(item => {
            let id_index = res.data.on_sale_product_arr.indexOf(item.id);
            if (id_index != -1) {
              orgGoods = {
                id: item.id,
                img: item.images[0],
                name: item.name,
                price: item.price,
                num: item.num,
                limit: item.limit,
                day_limit_buy: item.day_limit_buy,
              }
            }
          })
          this.curGoodsBox = {
            orgGoods,
            newGoods: {
              id: params.id,
              img: params.images[0],
              name: params.name,
              price: params.price,
              day_limit_buy: params.day_limit_buy,
              limit: params.limit,
            }
          }

          if (orgGoods.id && res.data.on_sale_product_arr.indexOf(params.id) != -1 && this
            .curGoodsBox.orgGoods.id != this.curGoodsBox.newGoods.id) {
            this.limitShow = true;
            return;
          } else {
            this.$helper.toast('特价商品超过购买限制')
          }
        }
        return;
      })


    },
    countFunc (num) {
      if (num) {
        this.buyNum += 1;
      } else {
        if (this.buyNum > 1) {
          this.buyNum -= 1;
        }
      }
    },
    buyGoodsClose () {
      this.buyGoodsShow = false;
    },
    buyNowFunc () {
      const {
        name,
        new_price,
        price,
        id,
        images
      } = this.itemData;
      let params = [{
        name,
        new_price,
        price,
        id,
        images,
        num: this.buyNum
      }];
      uni.navigateTo({
        url: `/pages/shop/goodsSubmitOrder?products_info=${JSON.stringify(params)}`
      });
    },
    changeNow (goods) {
      let shopingCarList = this.$store.state.shopingCarList.filter(item => item.id != this.curGoodsBox.orgGoods
        .id);
      const {
        name,
        new_price,
        price,
        id,
        images,
        stock,
        day_limit_buy,
      } = this.itemData;
      let params = {
        name,
        new_price,
        price,
        id,
        images,
        num: this.buyNum,
        day_limit_buy
      };
      if (this.limit) {
        params.limit = this.limit;
      }
      shopingCarList.push(params);
      this.SET_SHOPING_CAR_LIST(shopingCarList);
      this.buyNum = 1;
      this.buyGoodsShow = false;
      this.$emit('submitGetGoods', params);
      this.$helper.toast('已添加进购物车');
      this.limitClose();
    },
    limitClose () {
      this.limitShow = false;
      this.limit = '';
      this.curGoodsBox = {
        orgGoods: {
          id: '',
          img: '',
          name: '',
          price: ''

        },
        newGoods: {
          id: '',
          img: '',
          name: '',
          price: ''

        }
      }
    }
  }
};
</script>

<style lang="scss">
.goodsItem {
  width: 340rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 10rpx;

  .goods_img {
    margin-bottom: 10rpx;
    position: relative;

    image {
      width: 340rpx;
      height: 340rpx;
      border-radius: 10rpx;
    }

    .no_num {
      position: absolute;
      top: 0;
      left: 0;
      width: 340rpx;
      height: 340rpx;
      background-color: rgba(0, 0, 0, 0.2);

      .no_num_text {
        color: #fff;
        font-size: 34rpx;
        text-align: center;
        line-height: 340rpx;
      }
    }
  }

  .goods_bottom_info_box {
    padding: 12rpx 12rpx 25rpx;

    .goods_name {
      font-size: 28rpx;
      font-weight: 400;
      color: #222222;
      margin-bottom: 18rpx;
      height: 80rpx;
      overflow: hidden;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }

    .goods_inner_bottom_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 12rpx;

      .goods_left_info {
        .goods_price {
          margin-bottom: 8rpx;
        }

        .goods_sale_num {
        }
      }

      .goods_shoping_car_btn {
      }
    }
  }

  .model_box {
    padding: 24rpx;
  }

  .goods_info_box_popup {
    display: flex;
    margin-bottom: 40rpx;

    .goods_img {
      margin-right: 10rpx;

      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;
      }
    }

    .goods_details_info {
      .now_pirce {
        margin-right: 10rpx;
      }

      .old_price {
      }
    }
  }

  .btn_box {
    display: flex;
    align-items: center;

    .num_box {
      width: 44rpx;
      height: 44rpx;
      text-align: center;
      line-height: 44rpx;
    }
  }

  .buy_btn_box {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 40rpx;

    button {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 26rpx;

      &:nth-child(2n) {
        margin-left: 20rpx;
      }
    }
  }

  .limitModel {
    width: 500rpx;
    padding: 50rpx 50rpx;

    .limit_tags {
      text-align: center;
      margin-bottom: 40rpx;
      font-size: 26rpx;
    }

    .change_goods_box_list {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .change_goods_box {
        .change_goods_img {
          image {
            width: 200rpx;
            height: 200rpx;
          }
        }

        .change_goods_name {
          font-size: 26rpx;
        }
      }

      .right_arr {
        padding-bottom: 50rpx;
      }
    }

    .limit_btn_box {
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 40rpx;

      button {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 26rpx;

        &:nth-child(2n) {
          margin-left: 20rpx;
        }
      }
    }
  }
}
</style>